1. signup page

src/components/SignUpForm.tsx

                  import React from "react";
                  export class SignUp extends React.Component{

                  }

                  

2 .App.tsx file

                  import React from 'react';
                  import './App.css';
                  import { SignUp } from './components/SignUpForm';
                  function App() {
                    return (
                      <SignUp/>
                    );
                  }
                  export default App;

                  

3. signup page

                  import React from "react";
                  export class SignUp extends React.Component{
                    render() {
                      return (
                        <div className='wrapper'>
                          <div className='form-wrapper'>
                              <h2>Sign Up</h2>
                              <form onSubmit={this.handleSubmit} noValidate >
                                <div className='fullName'>
                                    <label htmlFor="fullName">Full Name</label>
                                    <input type='text' name='fullName' onChange=            {this.handleChange}/>
                                </div>
                                <div className='email'>
                                    <label htmlFor="email">Email</label>
                                    <input type='email' name='email' onChange={this.handleChange}/>
                                </div>
                                <div className='password'>
                                    <label htmlFor="password">Password</label>
                                    <input type='password' name='password' onChange={this.handleChange}/>
                                </div>              
                                <div className='submit'>
                                    <button>Register Me</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    );
                  }
                  }

                  

Add functions

                  import React from "react";
                  export class SignUp extends React.Component{
                  handleChange = (event : any) => {}
                    handleSubmit = (event : any) => {}
                  render() {
                      ...
                      ...
                    }
                  }

                  

                  import React from "react";
                  handleChange = (event : any) => {
                    event.preventDefault();
                    const { name, value } = event.target;
                    this.setState({[name]: value});
                    console.log(this.state) ;
                  }
                  handleSubmit = (event : any) => {}
                  export class SignUp extends React.Component{
                  constructor(props: any) {
                      super(props);
                      this.state = {
                          username : null,
                          email : null,
                          password : null
                        }
                    }
                  render() {
                      ...
                      ...
                  }
                  }

                  

Define variables

                  import React from "react";
                  interface SignUpProps {
                    name?: any;
                    value?: any;
                  }
                  interface SignUpState {
                    username : string,
                    email : string,
                    password : string,
                    errors : {
                        username :  string,
                        email : string,
                        password : string
                    }
                  }
                  handleSubmit = (event : any) => {}
                  export class SignUp extends React.Component<SignUpProps, SignUpState>
                  {
                    constructor(props: SignUpProps) {
                      super(props);
                      const initialState = {
                          username : '',
                          email : '',
                          password : '',
                          errors : {
                            username : '',
                            email : '',
                            password : ''
                          } 
                        }
                        this.state = initialState;
                        this.handleChange = this.handleChange.bind(this);
                  }

                  

Validation

                  handleChange = (event : any) => {
                  event.preventDefault();
                  const { name, value } = event.target;
                  let errors = this.state.errors;
                  switch (name) {
                    case 'username':
                      errors.username = value.length < 5 ? 'Username must be 5 characters long!': '';
                      break;
                    case 'email':
                      errors.email = Regex.test(value)? '': 'Email is not valid!';
                      break;
                    case 'password':
                      errors.password = value.length < 8 ? 'Password must be eight characters long!': '';
                      break;
                    default:
                      break;
                  }
                this.setState(Object.assign(this.state, { errors,[name]: value }));
                console.log(this.state.errors);
                }

                

error display

                render() {
                      const {errors} = this.state   
                      return (
                        <div className='wrapper'>
                          <div className='form-wrapper'>
                              <h2>Sign Up</h2>
                              <form onSubmit={this.handleSubmit} noValidate >
                                <div className='fullName'>
                                    <label htmlFor="fullName">Full Name</label>
                                    <input type='text' name='fullName' onChange=            {this.handleChange}/>
                                    {errors.username.length > 0 &&  <span style={color: "red"}>{errors.username}</span>}
                  </div>
                                <div className='email'>
                                    <label htmlFor="email">Email</label>
                                    <input type='email' name='email' onChange={this.handleChange}/>
                  {errors.email.length > 0 &&  <span style={color: "red"}>{errors.email}</span>}
                  </div>
                                <div className='password'>
                                    <label htmlFor="password">Password</label>
                                    <input type='password' name='password' onChange={this.handleChange}/>
                                    {errors.password.length > 0 &&  <span style={color: "red"}>{errors.password}</span>}
                  </div>              
                                <div className='submit'>
                                    <button>Register Me</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    );
                  }

                  

Submit function

                  handleSubmit = (event : any) => {
                      event.preventDefault();
                      let validity = true;
                      Object.values(this.state.errors).forEach(
                        (val) => val.length > 0 && (validity = false)
                      );
                      if(validity == true){
                          console.log("Registering can be done");
                      }else{
                          console.log("You cannot be registered!!!")
                      }
                  }